﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Filament Group Lab</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" media="screen" href="css/cust-smooth/jquery-ui-1.8.16.custom.css" />
    
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    
	<style type="text/css">
	body { font-size:62.5%; margin:0; padding:0; }
	
	</style>

    <script type="text/javascript">
$(function(){
	
	function SimpleMenu( dombut ) {
		var menubut = $('#'+dombut);
		var menulist = dombut+'_items';
		
		function killmenu() {
			$('#'+dombut).unbind( 'focusout', killmenu ); 
			$('#'+menulist).menu('destroy');
			$('#'+menulist).remove();								
		};						

    	menubut.button({ icons: {secondary: "ui-icon-triangle-1-s" } });
		menubut.bind( 'click',
			function() {
				var exists = $('#'+menulist).length ? true : false;
				if( exists ) killmenu();
				else {
					$('<ul id="'+menulist+'" style="position: absolute; top: -1000px;"></ul>').appendTo(document.body);
					$('#'+menulist).html(
						'<li oper="Catalogue"><a href="#" oper="Catalogue">Каталог автомобилей</a></li> \
						 <li oper="Models"><a href="#" >Справочник моделей</a></li> \
						 <li oper="Vendors"><a href="#">Справочник марок</a></li> \
						 <li oper="Colors"><a href="#">Справочник цветов</a></li>'
					);
				
					$('#'+menulist).menu( {
						selected: function(event,ui) {
								if( ui ) alert(ui.item.attr('oper'));
								killmenu();								
						}
					} );

					$('#'+menulist).position({ my: 'left top', at: 'left bottom', of: menubut });
					$('#'+menulist).mouseover( function()  { $('#'+dombut).unbind( 'focusout', killmenu ); } );
					$('#'+menulist).mouseleave( function() { $('#'+dombut).bind( 'focusout', killmenu ); } );
					
					$('#'+dombut).focusout( killmenu );						
					
				}
			}
		);
	}
	
	SimpleMenu( 'EditMenu' );
	SimpleMenu( 'ViewMenu' );
});
</script>
</head>

<body>
<button id="EditMenu" style>Редактировать</button>
<button id="ViewMenu" style>Редактировать</button>
<div>Hello,World!!!</div>
<div class="ui-widget-header ui-state-default ui-corner-all ui-icon ui-icon-disk"></div>
<div class="ui-widget-header ui-state-hover ui-corner-all ui-icon ui-icon-disk"></div>
</body>
</html>
